<template>
  <div id="app">
    <top-bar v-if="ShowFFF" />
    <topbar-red v-if="ShowRed" />
    <nav-a v-if="isShowmobil" />
    <div>
      <router-view />
    </div>
    <writeInfo />
    <my-footer />
  </div>
</template>
<script>
import topBar from '../components/common/topBar/Topbar'
import TopbarRed from '../components/common/topBar/TopbarRed'
import navA from '../components/common/topBar/nav'
import writeInfo from './common/writeInfo'
import myFooter from './common/myFooter'
export default {
  name: 'Home',
  components: { topBar, TopbarRed, writeInfo, myFooter, navA },
  data() {
    return {
      isShowmobil: '',
      ShowFFF: '',
      ShowRed: '',
      clientWidth: '',
      scrollHeight: ''
    }
  },
  methods: {
    handleScroll() {
      this.scrollHeight = window.scrollY
      this.clientWidth = document.body.clientWidth
      if (this.clientWidth > 980) {
        if (this.scrollHeight > 5) {
          this.ShowRed = true
          this.ShowFFF = false
        } else if (this.scrollHeight < 5) {
          this.ShowRed = false
          this.ShowFFF = true
        }
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.clientWidth = document.body.clientWidth
    this.scrollHeight = window.scrollY
    if (this.clientWidth < 980) {
      this.isShowmobil = true
      this.ShowFFF = false
      this.ShowRed = false
    }
  },
  destroyed: function() {
    window.removeEventListener('scroll', this.handleScroll) //  离开页面清除（移除）滚轮滚动事件
  }
}
</script>
